<template>
  <main>
    <!-- 头部 -->
    <app-header></app-header>
    <app-top-nav></app-top-nav>
    <app-slider></app-slider>

    <!-- 主体 -->
    <app-top-news></app-top-news>
    <split-div></split-div>

    <!-- 新闻列表 -->
    <app-news-header :class="{tofixed:floor1}"></app-news-header>
    <news-list></news-list>
    <!-- 财经 -->
    <app-finance-header :class="{tofixed:floor2}"></app-finance-header>
    <finance-list></finance-list>
    <!-- 体育 -->
    <app-sport-header :class="{tofixed:floor3}"></app-sport-header>
    <sport-list></sport-list>
    <!-- 娱乐 -->
    <app-entertainment-header :class="{tofixed:floor4}"></app-entertainment-header>
    <entertainment-list></entertainment-list>
    <!-- 军事 -->
    <app-military-header :class="{tofixed:floor5}"></app-military-header>
    <military-list></military-list>
    <!-- 图库 -->
    <app-subject-header :class="{tofixed:floor6}"></app-subject-header>
    <subject-list></subject-list>

    <!-- 健康 -->
    <app-health-header :class="{tofixed:floor7}"></app-health-header>
    <health-list></health-list>
    <!-- 汽车 -->
    <app-auto-header :class="{tofixed:floor8}"></app-auto-header>
    <auto-list></auto-list>
    <!-- 房产 -->
    <app-house-header :class="{tofixed:floor9}"></app-house-header>
    <house-list></house-list>
    <!-- 小说 -->
    <app-novel-header :class="{tofixed:floor10}"></app-novel-header>
    <novel-list></novel-list>
    <!-- 历史 -->
    <app-history-header></app-history-header>
    <history-list></history-list>

    <!-- 显示更多 -->
    <show-more></show-more>
    <split-div></split-div>
    <!-- 底部 -->
    <app-bottom-nav></app-bottom-nav>
    <app-footer></app-footer>

     <!-- 侧边回到顶部导航栏 -->
    <app-aside></app-aside>

  </main>
</template>

<script>
import $ from "jquery";

//  import appHeader from './app/appHeader'
import appHeader from "./app/appHeader.vue";
import appTopNav from "./app/appTopNav.vue";
import appSlider from "./app/appSlider.vue";
import appTopNews from "./app/appTopNews.vue";
import appBottomNav from "./app/appBottomNav.vue";
import appFooter from "./app/appFooter.vue";
import appAside from "./app/appAside.vue";

import splitDiv from "./app/splitDiv.vue";
import showMore from "./app/showMore.vue";

import appNewsHeader from "./news/appNewsHeader.vue";
import newsList from "./news/newsList.vue";

import appEntertainmentHeader from "./entertainment/appEntertainmentHeader";
import entertainmentList from "./entertainment/entertainmentList";

import appSportHeader from "./sport/appSportHeader";
import sportList from "./sport/sportList";

import appFinanceHeader from "./finance/appFinanceHeader";
import financeList from "./finance/financeList";

import appAutoHeader from "./auto/appAutoHeader";
import autoList from "./auto/autoList";

import appHouseHeader from "./house/appHouseHeader";
import houseList from "./house/houseList";

import appMilitaryHeader from "./military/appMilitaryHeader";
import militaryList from "./military/militaryList";

import appSubjectHeader from "./subject/appSubjectHeader";
import subjectList from "./subject/subjectList";

import appHistoryHeader from "./history/appHistoryHeader";
import historyList from "./history/historyList";

import appHealthHeader from "./health/appHealthHeader";
import healthList from "./health/healthList";

import appNovelHeader from "./novel/appNovelHeader";
import novelList from "./novel/novelList";

export default {
  data() {
    return {
      floor1: false,
      floor2: false,
      floor3: false,
      floor4: false,
      floor5: false,
      floor6: false,
      floor7: false,
      floor8: false,
      floor9: false,
      floor10: false
    };
  },
  components: {
    appHeader,
    appTopNav,
    appSlider,
    appTopNews,
    splitDiv,
    showMore
    ,appBottomNav
    ,appFooter
    ,appAside

    ,appNewsHeader
    ,newsList

    ,entertainmentList
    ,appEntertainmentHeader

    ,appSportHeader
    ,sportList

    ,appFinanceHeader
    ,financeList

    ,appAutoHeader
    ,autoList
    
    ,houseList
    ,appHouseHeader

    ,militaryList
    ,appMilitaryHeader

    ,appSubjectHeader
    ,subjectList

    ,historyList
    ,appHistoryHeader

    ,appHealthHeader
    ,healthList

    ,novelList
    ,appNovelHeader

  },
  methods: {
      handleScroll() {
        // window.console.log($(window).scrollTop());
       
        if($(window).scrollTop()>=400&&$(window).scrollTop()<=1200){
            this.floor1=true;
        }else{
           this.floor1=false;
        }

        if($(window).scrollTop()>=1350&&$(window).scrollTop()<=1700){
            this.floor2=true;
        }else{
           this.floor2=false;
        }

        if($(window).scrollTop()>=1800&&$(window).scrollTop()<=2250){
            this.floor3=true;
        }else{
           this.floor3=false;
        }

        if($(window).scrollTop()>=2400&&$(window).scrollTop()<=2800){
            this.floor4=true;
        }else{
           this.floor4=false;
        }

        if($(window).scrollTop()>=2950&&$(window).scrollTop()<=3450){
            this.floor5=true;
        }else{
           this.floor5=false;
        }

        if($(window).scrollTop()>=3550&&$(window).scrollTop()<=3800){
            this.floor6=true;
        }else{
           this.floor6=false;
        }

        if($(window).scrollTop()>=3880&&$(window).scrollTop()<=4200){
            this.floor7=true;
        }else{
           this.floor7=false;
        }

        if($(window).scrollTop()>=4300&&$(window).scrollTop()<=4650){
            this.floor8=true;
        }else{
           this.floor8=false;
        }

        if($(window).scrollTop()>=4800&&$(window).scrollTop()<=5300){
            this.floor9=true;
        }else{
           this.floor9=false;
        }

        if($(window).scrollTop()>=5400&&$(window).scrollTop()<=5850){
            this.floor10=true;
        }else{
           this.floor10=false;
        }
      }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
      window.addEventListener('scroll', this.handleScroll);
  }
   ,
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tofixed{
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 9999 !important;
  background: #fff !important;
  width: 100% !important;
  padding: 1rem .346667rem .293333rem 0 !important;
  height: .55rem !important;
  box-sizing: border-box;
}
</style>
